<extend name="Base/base" />
<block name="banner">
    <section class="banner muthink-animate fadeInDown" data-wow-duration="1s" data-wow-delay="0.5s">
      <div id="banner" class="owl-carousel owl-theme">
          <Mmcms:banner name="HomeBanner" item="item">
          <div class="item"><img class="visible-xs center-block" src="{:image_resize($item['mobile'],0,0)}" class="center-block">
            <img class="hidden-xs center-block" src="{:image_resize($item['image'],0,0)}" class="center-block">
              <div class="banner-caption">                
                <h1>{$item.banner_image_description.title|nl2br=###}</h1>
              </div>
            </div>
          </Mmcms:banner>         
        </div>
    </section>    
</block>
<block name="body">
  <section class="profile margin-top">
    <div class="container">
      <div class="row">
        <div class="col-sm-6 muthink-animate fadeInLeft"  data-wow-duration="1s" data-wow-delay="1.5s margin-bottom">
          {:W('Html/index',array('About'))}
        </div>
        <div  class="col-sm-6 muthink-animate fadeInRight"  data-wow-duration="1s" data-wow-delay="1.5s">
          {:W('Article/index',array('HomePage'))}
        </div>
      </div>

    </div>
  </section>
  <div class="margin-top">
    <div class="container">
      {:W('Featured/index',array('HomePage'))}
    </div>
  </div>
</block>
<block name="script">
  <script type="text/javascript">
    $(document).ready(function() {
          var owlbanner = $("#banner");       
          owlbanner.owlCarousel({
            autoPlay:true,
            scrollPerPage:true,
            pagination:false,
            navigation : true,
            navigationText:['<i class="fa fa-chevron-left fa-2x"></i>','<i class="fa fa-chevron-right fa-2x"></i>'],
            singleItem : true,
            transitionStyle : "fadeUp"
        });      
      });
  </script>
</block>
